$(function () {
  StatisticsIncoming = 1;
  initStatisticsIncomingData()
})

function initStatisticsIncomingData() {
  //来款预算总额
  var obj = {
    username: getUsername,
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 70404,
    chartNo: 1
  }
  //API
  ApiGet("getdata", obj, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data;
    $(".laikuanyusuanzonge").text(data[0].key01)
    $(".shijilaikuanzonge").text(data[0].key02)
    let wancheng = `
    <p>完成率</p>
    <div style="display: flex;justify-content: space-between;width: 100%;">
    <span class="wanchenglv">${data[0].key03}%</span>
    <div class="progress-bar">
			<div style="width: ${data[0].key03 >= 100 ? 100 : data[0].key03}%; background-color:${data[0].key03 >= 100 ? "#F53F3F" : "#165DFF"}" class="progress"></div>
		</div>
    </div>
   `
    $(".wanchenglv").html(wancheng)

  });
  //top3
  var obj1 = {
    username: getUsername,
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 70404,
    chartNo: 2
  }
  //API
  ApiGet("getdata", obj1, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data;
    console.log(data)
    let top = '';
    if (data.length > 0) {
		top += `
  <p>所内来款TOP3 <span>(单位：万元)</span> </p>
    <div class="item">
      <!-- item 1 -->
      <div id="top1">
        <div class="item-name">
          <div class="name">${data[0].key04}</div>
          <div><img src="./assets/images/statistics/top1.png" alt=""></div>
        </div>
        <div class="charts">
          <div class="charts-biao">
            <!-- 环形图1 -->
            <div class="">
              <svg style="height: 88px;">
                <circle cx="44" cy="44" r="38" stroke="#E8F3FF" stroke-width="4"
                  fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" />

                <circle cx="44" cy="44" r="38" stroke="${data[0].key03 >= 100 ? '#F53F3F' :'#0062FF'}" stroke-width="8" fill="none"
                stroke-dasharray="${Math.PI * 76 * data[0].key03}" stroke-dashoffset="0"
                  stroke-linecap="round" />
              </svg>
            </div>
            <div class="zhixinglv">执行率 <br> <span style="font-size:${data[0].key03 >= 1000 ? '12px' : '14px'}">${data[0].key03 }%</span> </div>
          </div>
          <div class="charts-detail">
            <p>来款预算</p>
            <div>${data[0].key01}</div>
            <p>实际来款</p>
            <div>${data[0].key02}</div>
          </div>
        </div>
      </div>`
	if(data.length>1){
		top += `<!-- item 2 -->
      <div id="top2">
        <div class="item-name">
          <div class="name">${data[1].key04}</div>
          <div><img src="./assets/images/statistics/top2.png" alt=""></div>
        </div>
        <div class="charts">
          <div class="charts-biao">
            <!-- 环形图2 -->
            <div class="">
              <svg style="height: 88px;">
                <circle cx="44" cy="44" r="38" stroke="#E8F3FF" stroke-width="4"
                  fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" />

                <circle cx="44" cy="44" r="38" stroke="${data[1].key03 >= 100 ? '#F53F3F' :'#0062FF'}" stroke-width="8" fill="none"
                  stroke-dasharray="${Math.PI * 76 * data[1].key03}" stroke-dashoffset="0"
                  stroke-linecap="round" />
              </svg>
            </div>
            <div class="zhixinglv">执行率 <br> <span style="font-size:${data[1].key03 >= 1000 ? '12px' : '14px'}">${data[1].key03 }%</span> </div>
          </div>
          <div class="charts-detail">
          <p>来款预算</p>
          <div>${data[1].key01}</div>
          <p>实际来款</p>
          <div>${data[1].key02}</div>
          </div>
        </div>
      </div>`
	}
	if(data.length>2){
		top += `<!-- item 3 -->
      <div id="top3">
        <div class="item-name">
          <div class="name">${data[2].key04}</div>
          <div><img src="./assets/images/statistics/top3.png" alt=""></div>
        </div>
        <div class="charts">
          <div class="charts-biao">
            <!-- 环形图3 -->
            <div class="">
              <svg style="height: 88px;">
                <circle cx="44" cy="44" r="38" stroke="#E8F3FF" stroke-width="4"
                  fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" />
                <circle cx="44" cy="44" r="38" stroke="${data[2].key03 >= 100 ? '#F53F3F' :'#0062FF'}" stroke-width="8" fill="none"
                  stroke-dasharray="${Math.PI * 76 * data[2].key03}" stroke-dashoffset="0"
                  stroke-linecap="round" />
              </svg>
            </div>
            <div class="zhixinglv">执行率 <br> <span style="font-size:${data[2].key03 >= 1000 ? '12px' : '14px'}">${data[2].key03 }%</span> </div>
          </div>
          <div class="charts-detail">
          <p sttyle="color: #4E5969;font-size: 12px;">来款预算</p>
          <div>${data[2].key01}</div>
          <p>实际来款</p>
          <div>${data[2].key02}</div>
          </div>
        </div>
      </div>`
	}
	top += `</div>`
      $(".incbudget-item").html(top)
      if (data.length == 1) {
        document.getElementById("top1").style.display = "block"
        document.getElementById("top2").style.display = "none"
        document.getElementById("top3").style.display = "none"
      }
      if (data.length == 2) {
        document.getElementById("top1").style.display = "block"
        document.getElementById("top2").style.display = "block"
        document.getElementById("top3").style.display = "none"
      }
      if (data.length == 3) {
        document.getElementById("top1").style.display = "block"
        document.getElementById("top2").style.display = "block"
        document.getElementById("top3").style.display = "block"
      }
    }

  });
  //来款统计
  var obj2 = {
    username: getUsername,
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 70404,
    chartNo: 3
  }
  //API
  ApiGet("getdata", obj2, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data;
    getBiaxialGraphGroupChart(data)
  });
  //来款明细表
  var obj3 = {
    username: getUsername,
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 70404,
    chartNo: 4
  }
  //API
  ApiGet("getdata", obj3, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data;
    console.log(data, '来款明细表')

    let table = ''
    let tableDate = []
    let tableLixiDate = []
    for (let i = 0; i < data.length; i++) {
      if (data[i].key05 == "利息") {
        tableLixiDate.push(data[i])
      } else {
        tableDate.push(data[i])
      }
    }
    console.log(tableDate, "基础", tableLixiDate, "利息")
    //表内容（基础部分）
    tableDate.forEach((item) => {
      table += `
    <tr class="tempTR">
      <td colspan="2"> <a class="dwname" style="cursor: pointer;" onclick="laikuanClickToMingxi(this)" name=${item.key04}>${item.key04}</a> </td>
      <td>${item.key01}</td>
      <td>${item.key02}</td>
      <td>
       <span>  ${item.key03}%</span>
       <div class="progress-bar" style="width:85%;height:10px;overflow: hidden; display: inline-block;">
         <div style="width: ${item.key03 >= 100 ? 100 : item.key03}%; 
                  background-color:${item.key03 >= 100 ? "#F53F3F" : "#165DFF"}" class="progress"></div>
       </div>
      </td>
    </tr>
  `
    })
    $(".tbody").html(table);

    //表内容（利息部分）
    tableLixiDate.forEach((item) => {
      table += `
      <tr class="tempTR">
        <td rowspan="2" class="lixi">利息</td>
        <td> <a class="dwname" style="cursor: pointer;" onclick="laikuanClickToMingxi(this)" name=${item.key04}>${item.key04}</a></td>
        <td>${item.key01}</td>
        <td>${item.key02}</td>
        <td>
          <span>  ${item.key03}%</span>
          <div class="progress-bar" style="width:85%;height:10px;overflow: hidden; display: inline-block;">
            <div style="width: ${item.key03 >= 100 ? 100 : item.key03}%; 
                background-color:${item.key03 >= 100 ? "#F53F3F" : "#165DFF"}" class="progress"></div>
          </div>
        </td>
      </tr>
      `
    })
    $(".tbody").html(table);
    document.querySelectorAll(".lixi")[0].style.display = "table-cell"
  });
  // createdli()
  //"来款情况说明 {1-本年情况说明}"
  var obj3 = {
    username: getUsername,
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 70403,
    chartNo: 2
  }
  //API
  ApiGet("getdata", obj3, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data[0].key01;
    $(".edit").text(data)
  })
}


//点击来款明细表格
function laikuanClickToMingxi(obj) {
  let laikuanmingxiTableItemName = obj.getAttribute('name')
  localStorage.setItem("laikuanmingxiTableItemName", laikuanmingxiTableItemName)
  window.location.href = "budget-IncomingPayment.html"
  // console.log(obj.getAttribute('name'), '点击来款明细表格')
}

function getBiaxialGraphGroupChart(data) {
  console.log(data)
  let Xdata = []
  let lai = []
  let shi = []
  let wancheng = []
  console.log(data)
  if (data) {
    data.forEach((item) => {
      lai.push(item.key01)
      shi.push(item.key02)
      wancheng.push(item.key03)
      Xdata.push(item.key04)
    })
  }
  console.log(Xdata)
  let legendData = [{
    name: '来款预算',
    icon: "circle"
  }, {
    name: '实际来款',
    icon: "circle"
  }, {
    name: '完成率',
    icon: "circle"
  }]

  let seriedData = [{
      name: '来款预算',
      type: 'bar',
      color: "#165DFF",
      label: {
        show: false,
        position: 'inside'
      },
      itemStyle: {
        color: "#165DFF"
      },
      data: lai
    },
    {
      name: '实际来款',
      type: 'bar',
      barGap: '0%',
      color: "#50CD89",
      label: {
        show: false,
        position: 'inside'
      },
      itemStyle: {
        color: "#50CD89"
      },
      data: shi
    },
    {
      name: '完成率',
      type: 'line',
      yAxisIndex: 1, //双y轴要添加
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 6, //标记的大小
      showSymbol: false,
      itemStyle: {
        normal: {
          color: "#6F42C1", //改变折线点的颜色
          borderColor: "white",
          borderWidth: 2,
          lineStyle: {
            color: "#6F42C1", //改变折线颜色
          },


        },
      },
      data: wancheng
    },
  ]
  have("laikuantongji") ? BiaxialGraphPreStackingLines("laikuantongji", legendData, Xdata, seriedData) : ''
}

document.querySelector('.editBtn img').onclick = function () {
  document.querySelector('.editBtn .mask-content textarea').value = document.querySelector('.Incoming-cont-right .laikuanqingkuang .edit').innerText
  toggle()
}

document.querySelector('.editBtn .mask-content .btn button.cancle').onclick = function () {
  toggle()
}

function toggle() {
  document.querySelector('.editBtn .mask-position').style.display = document.querySelector('.editBtn .mask-position').style.display !== 'block' ? 'block' : 'none'
}

document.querySelector('.editBtn .mask-content .btn button.save').onclick = () => {
  $.get(
    `${API_URL}getdata`, {
      username: localStorage.getItem("user"),
      budgetYear: localStorage.getItem("year"),
      budgetMonth: fullMonth,
      status: 2,
      chartPage: 70403,
      chartNo: 3,
      key01: document.querySelector('.editBtn .mask-content textarea').value
    },
    function (res) {
      let re = eval("(" + res + ")");
      alert(re.items[0].charts[0].chart_name)
      toggle()
      //"来款情况说明 {1-本年情况说明}"
      var obj3 = {
        budgetYear: fullYear,
        budgetMonth: fullMonth,
        dept: fullDepartment,
        status: 2,
        chartPage: 70403,
        chartNo: 2
      }
      //API
      ApiGet("getdata", obj3, function (e) {
        var json = JSON.parse(e);
        let data = json.items[0].charts[0].data[0].key01;
        console.log(data)
        $(".edit").text(data)
      })
    })
}